<!--
 * @Author: wuzhen
 * @Date: 2020-01-14 13:06:46
 * @LastEditors  : wuzhen
 * @LastEditTime : 2020-01-19 16:15:32
 * @Description: 聊天bar
 -->
<template>
  <div class="page-bar">
    <div class="head-img" @click.stop="showInfo">
      <wz-img type="face" :src="$store.state.chat.userInfo.face" v-if="$store.state.chat.userInfo.face"/>
      <img :src="require('@/assets/image/icon_personal.png')" v-else>
    </div>
    <div class="icon-msg icon-img" @click.stop="changeRouter('chat')">
      <Badge :count="unreadCount">
        <img :src="icon_chat">
      </Badge>
    </div>
    <div class="icon-user icon-img" @click.stop="changeRouter('addressBook')">
      <img :src="icon_book">
    </div>
    <div class="icon-set icon-img" @click.stop="openMenu">
      <img :src="icon_set">
    </div>
    <!-- 个人信息 -->
    <user-info
      :left="userLeft"
      :top="userTop"
      @on-close="onCloseUserInfo"
      ref="userInfo"
      v-show="showUserInfo"
    ></user-info>
    <!-- 设置菜单 -->
    <context-menu
      :context-menu="contextMenu"
      :left="contextLeft"
      :top="contextTop"
      @on-close="onCloseContextMenu"
      @on-click="onClickContextMenu"
      v-if="showContextMenu"
    ></context-menu>
    <Modal v-model="showModal" width="380">
      <p slot="header" style="text-align:center">
        <span>{{modalTitle}}</span>
      </p>
      <div style="text-align:center" v-if="modalType !== 'language'">
        <p>{{modalTxt}}</p>
      </div>
      <Select  style="width:100%" v-model="local" v-else>
        <Option v-for="item in languageList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <div class="flex modal-ft" slot="footer" style="padding: 0 15px 15px 15px">
        <div class="flex-item" style="padding: 0 15px">
           <Button
            type="primary"
            long
            @click="onSubmit"
            >{{$t("btn_confirm")}}</Button>
        </div>
        <div class="flex-item" style="padding: 0 15px"  >
           <Button
            type="error"
            long
            @click="showModal = false"
            >{{$t("btn_cancel")}}</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import { Badge, Avatar, Icon, Modal, Button, Select, Option, Message } from "view-design";
import UserInfo from "@/components/UserInfo/index.vue";
import ContextMenu from "@/components/ContextMenu/index.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    UserInfo,
    ContextMenu,
    Badge,
    Avatar,
    Icon,
    Modal,
    Button,
    Select,
    Option,
    Message
  },
  inject: ["reload"],
  data() {
    return {
      icon_set: require("@/assets/image/icon_set.png"),
      userLeft: 0,
      userTop: 0,
      showUserInfo: false,
      showContextMenu: false,
      contextMenu: [
        {
          label: this.$t("set_language"),
          value: "language"
        },
        {
          label: this.$t("set_clearMsg"),
          value: "clear"
        },
        {
          label: this.$t("set_logout"),
          value: "logout"
        }
      ],
      contextLeft: 0,
      contextTop: 0,
      modalType: '',
      showModal: false,
      modalTitle: this.$t("set_clearMsg"),
      modalTxt: this.$t("tip_clearMsg"),
      modal_loading: false,
      local: this.$store.state.system.local,
      languageList: [{
        label: this.$t("zh_CN"),
        value: 'zh_CN'
      }, {
        label: this.$t("zh_TW"),
        value: 'zh_TW'
      }, {
        label: this.$t("en_US"),
        value: 'en_US'
      }]
    };
  },
  computed: {
    icon_chat() {
      return this.$route.name === 'chat'? require("@/assets/image/icon_chat_active.png"): require("@/assets/image/icon_chat.png");
    },
    icon_book() {
      return this.$route.name === 'addressBook'? require("@/assets/image/icon_book_active.png"): require("@/assets/image/icon_book.png");
    },
    unreadCount() {
      let count = 0;
      this.chatUsers.forEach( v => {
        count = count + v.total;
      });
      return count;
    }
  },
  created() {
    this.$bus.$on("hideBarPopup", () => {
      this.showContextMenu = false;
      this.showUserInfo = false;
    });
  },
  beforeDestroy() {
    this.$bus.$off("hideBarPopup");
  },
  methods: {
    ...mapMutations(["set_clear_msg", "set_local"]),
    showInfo(e) {
      this.userLeft = e.clientX - this.screen.x + 10;
      this.userTop = e.clientY - this.screen.y + 10;
      this.$bus.$emit("hideBookPopup");
      this.$bus.$emit("hideBookSiderPopup");
      this.showContextMenu = false;
      this.showUserInfo = true;
      this.$refs["userInfo"].getData(this.$store.state.chat.userInfo.userid);
    },
    onCloseUserInfo() {
      this.showUserInfo = false;
    },
    openMenu(e) {
      this.contextLeft = e.clientX - this.screen.x;
      this.contextTop = e.clientY - this.screen.y - 110;
      this.showUserInfo = false;
      this.$bus.$emit("hideBookPopup");
      this.$bus.$emit("hideBookSiderPopup");
      this.showContextMenu = true;
    },
    onCloseContextMenu() {
      this.showContextMenu = false;
    },
    onClickContextMenu(type) {
      this.modalType = type;
      switch (type) {
        case "language": // 多语言
          this.modalTitle = this.$t("set_language");
          this.modalTxt = "";
          this.showModal = true;
          break;
        case "clear": // 清空聊天
          this.modalTitle = this.$t("set_clearMsg");
          this.modalTxt = this.$t("tip_clearMsg");
          this.showModal = true;
          break;
        case "logout": // 退出登录
          this.modalTitle = this.$t("set_logout");
          this.modalTxt = this.$t("tip_logout");
          this.showModal = true;
          break;
        default:
          break;
      }
    },
    // 清空聊天记录
    async onSubmit() {
      switch (this.modalType) {
        case "language":
          this.$i18n.locale = this.local;
          this.$imWebSocket.closeScoket();
          this.set_local(this.local);
          this.reload();
          this.showModal = false;
          break;
        case "clear":
          this.modal_loading = true;
          setTimeout(() => {
            this.chatUsers.forEach(v => {
              v.content = "";
              v.msgtype = 1001;
            });
            this.set_chatUsers(this.chatUsers);
            this.set_chatMsg([]);
            this.set_clear_msg(true);
            Message.success(this.$t("ok_clearMsg"));
            this.showModal = false;
            this.modal_loading = false;
            this.$nextTick(() => {
              // 恢复默认false
              this.set_clear_msg(false);
            });
          }, 1000);
          break;
        case "logout":
          this.modal_loading = true;
          const res = await this.$store.dispatch("onLogout");
          if (res.success) {
            this.showModal = false;
            this.modal_loading = false;
            this.$imWebSocket.closeScoket();
            this.$router.replace("/");
          }
          break;
        default:
          break;
      }
    },
    // 页面跳转
    changeRouter(name) {
      if (this.$route.name === name) return;
      this.$router.push(name);
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  &-bar {
    width: 64px;
    background: #e1e3e8;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #878bf4;
    padding: 20px 0;
    .head-img {
      cursor: pointer;
      width: 42px;
      height: 42px;
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 30px;
      img{
        width: 100%;
      }
    }
    .icon {
      &-img{
        cursor: pointer;
        margin-bottom: 10px;
        img{
          width: 26px;
          height:25px;
        }
      }
      &-user{
        img{
          width: 26px;
          height:23px;
        }
      }
      &-set {
        position: absolute;
        bottom: 10px;
      }
    }
  }
}
</style>
